<template>
	<div class="wy-main user-setting-edit">
		<a-row class="wy-main-title">
			<a-col :span="24">
				<p class="title-p">
					<a-divider class="title-vertical"  type="vertical" />
					<span class="title-span" >个人信息修改</span>
					<a-divider class="title-divider"  />
				</p>
			</a-col>
		</a-row>
		<a-row type="flex" justify="space-around" align="middle">
			<a-col :span="6" style="text-align: center;margin-top: 10px;">
				<a-avatar shape="square" :size="100" icon="user" />
				<p style="color: #1890ff;margin-top: 10px;">修改头像</p>
			</a-col>
			<a-col :span="18">
				<p>登录名称：Rong001【您已经通过实名认证】</p>
				<p>账号ID：27637868764872601</p>
				<p>注册时间：2019年3月12日 下午 3：55：22</p>
			</a-col>
		</a-row>
		<a-divider />
		<a-row type="flex" justify="space-around" align="middle">
			<a-col :span="8" style="text-align: center;">
				您当前的账号安全程度
			</a-col>
			<a-col :span="16">
				安全级别:高 继续保持
			</a-col>
		</a-row>
		<a-form :form="form" style="width: 100%; margin-top: 10px;" @submit="handleSubmit" class="wy-form">
			<a-form-item v-bind="formItemLayout" label="登录名" extra="长度为6-16个字符，支持字母数字和@符号组成，不能使用空格。">
				<a-input v-decorator="[ 'loginname', { rules: [ {required: true, message: '登录名不能为空！',}]}]" />
			</a-form-item>
			<a-form-item v-bind="formItemLayout" label="密码">
				<a-input v-decorator="['password', { rules: [{required: true, message: '密码不能为空!',}, {validator: validateToNextPassword,}],} ]" type="password" />
			</a-form-item>
			<a-form-item v-bind="formItemLayout" label="确认密码">
				<a-input v-decorator="['confirm',{rules: [{required: true, message: '确认密码不能为空!',}, {validator: compareToFirstPassword,}],}]" type="password" @blur="handleConfirmBlur" />
			</a-form-item>
			<a-form-item v-bind="formItemLayout" label="真实姓名">
				<a-input v-decorator="[
		          'nickname',
		          {
		            rules: [{ required: true, message: '请输入您的真实姓名!', whitespace: true }]
		          }
		        ]" />
			</a-form-item>
			<a-form-item v-bind="tailFormItemLayout">
				<a-button type="primary" html-type="submit">
					修改
				</a-button>
			</a-form-item>
		</a-form>
		<a-row type="flex" justify="space-around" align="middle">
			<a-col :span="6" style="text-align: center;">
				注销账号
			</a-col>
			<a-col :span="12">
				如果您不再使用此账号，可以将其注销。账号成功注销后，其下所有服务、数据及隐私信息将会被删除并将无法恢复。《帮助文档》
			</a-col>
			<a-col :span="6" style="text-align: center;">
				<a>注销账号</a>
			</a-col>
		</a-row>

	</div>
</template>
<script>
	export default {
		data() {
			return {
				formItemLayout: {
					labelCol: {
						xs: {
							span: 24
						},
						sm: {
							span: 4
						},
					},
					wrapperCol: {
						xs: {
							span: 24
						},
						sm: {
							span: 20
						},
					},
				},
				tailFormItemLayout: {
					wrapperCol: {
						xs: {
							span: 24,
							offset: 16,
						},
						sm: {
							span: 16,
							offset: 2,
						},
					},
				},

				listData: '',

			}
		},
		beforeCreate() {
			this.form = this.$form.createForm(this);
		},
		methods: {
			//认证提交
			handleSubmit(e) {
				e.preventDefault();
				this.form.validateFieldsAndScroll((err, values) => {
					if(!err) {
						console.log('Received values of form: ', values);
					}
				});
			},
			//检测确认密码
			handleConfirmBlur(e) {
				const value = e.target.value;
				this.confirmDirty = this.confirmDirty || !!value;
			},
			//检测确认密码
			compareToFirstPassword(rule, value, callback) {
				const form = this.form;
				if(value && value !== form.getFieldValue('password')) {
					callback('您输入的两个密码不一致!');
				} else {
					callback();
				}
			},
			//检测密码		
			validateToNextPassword(rule, value, callback) {
				const form = this.form;
				if(value && this.confirmDirty) {
					form.validateFields(['confirm'], {
						force: true
					});
				}
				callback();
			},
		}
	}
</script>

<style lang="less" scoped>
	.user-setting-edit {
		padding: 0 20px 40px 20px;
		.cont_title{
			padding-left: 10px;
			margin: 20px 0 0 10px;
			border-left: 2px solid #36948D;
			font-weight: 700;
		}
	}
</style>